<template>
	<n-config-provider inline-theme-disabled :abstract='true'
					   :theme-overrides='themeOverrides'
					   :theme='theme' :locale='locale' :date-locale='dateLocale'>
		<n-theme-editor>
			<n-message-provider>
				<router-view/>
			</n-message-provider>
			<n-global-style/>
		</n-theme-editor>
	</n-config-provider>
</template>
<script lang='ts' setup>
import { computed, reactive } from 'vue';
import index from '@/config/vue/index.ts';
// 权限控制
import { registerDirective } from '@/config/directive/index.ts';
// 字体
import 'vfonts/FiraCode.css';
// 主题皮肤,语言和日期语言
import {
	darkTheme, dateZhCN, lightTheme, NConfigProvider, NGlobalStyle, NMessageProvider, NThemeEditor, zhCN
} from 'naive-ui';
import { useCommonStore } from '@/config/pinia/common.store.ts';
import { VxeUI } from '@/config/vxe/index.ts';
const commonStore = useCommonStore();
const theme = computed(() => {
	// 第一次访问是没有主题的,所以需要设置一个默认的
	let themeVar;
	if (commonStore.theme) {
		switch (commonStore.theme) {
			case 'light':
				localStorage.setItem('theme', 'light');
				document.getElementsByTagName('html')[0].setAttribute('data-theme', 'light');
				themeVar = lightTheme;
				VxeUI.setTheme('light');
				break;
			case 'dark':
				localStorage.setItem('theme', 'dark');
				document.getElementsByTagName('html')[0].setAttribute('data-theme', 'dark');
				themeVar = darkTheme;
				VxeUI.setTheme('dark');
				break;
		}
	} else {
		localStorage.setItem('theme', 'light');
		document.getElementsByTagName('html')[0].setAttribute('data-theme', 'light');
		themeVar = lightTheme;
		VxeUI.setTheme('light');
	}
	return themeVar;
});
const themeOverrides = reactive({
	common : { fontWeightStrong : '400' },
	Tree   : { nodeTextColorDisabled : 'unset' }
});
const locale = computed(() => zhCN);
const dateLocale = computed(() => dateZhCN);
// 注册指令
registerDirective(index.vue);
</script>
<style lang='scss'>
.n-config-provider{
	box-sizing :border-box;
	margin     :0;
	padding    :0;
	border     :0;
	height     :100%;
	width      :100%;
}
/*滚动条样式*/
::-webkit-scrollbar{
	display :block;
	width   :6px;
	height  :6px;
}
::-webkit-scrollbar-thumb{
	display            :block;
	box-shadow         :inset 0 0 6px rgba(76, 88, 112, .8);
	-webkit-box-shadow :inset 0 0 6px rgba(76, 88, 112, .8);
	border-radius      :1rem;
	background-color   :rgba(76, 88, 112, .8);
}
::-webkit-scrollbar-track{
	display            :none;
	-webkit-box-shadow :inset 0 0 5px rgba(0, 0, 0, .1);
	border-radius      :0;
	background         :rgba(0, 0, 0, 0.1);
	&:hover{
		display :block;
	}
}
@supports not selector(::-webkit-scrollbar){
	html{
		scrollbar-width :thin;
		scrollbar-color :rgba(76, 88, 112, .8) rgba(0, 0, 0, 0.1);
	}
}
.n-tree .n-tree-node.n-tree-node--disabled .n-tree-node-content{
	cursor :not-allowed;
}
</style>